<script setup>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const data = reactive([{
  id:"101",
  title:"这是新闻标题1"
},{
  id:"102",
  title:"这是新闻标题2"
},{
  id:"103",
  title:"这是新闻标题3"
},{
  id:"104",
  title:"这是新闻标题4"
},{
  id:"105",
  title:"这是新闻标题5"
},])

function fn(){
  // router.push("/newsDetail")
  // router.push({
  //   path:'/newsDetail'
  // })
  // router.push({
  //   name:'nDetail',params:{}
  // })
  // router.replace({
  //   name:'nDetail'
  // })

  // router.go(-2);
}

</script>

<template>
  <div class="about">
    <h1>新闻列表</h1>
    <ul>
      <!-- @click="$router.replace('/newsDetail')" -->
      <!-- @click="$router.replace({path:'/newsDetail'})" -->
      <!-- @click="$router.replace({name:'nDetail'})" -->
      <!-- @click="$router.push('/newsDetail')" -->
      <!-- @click="fn" -->
      <!-- @click="$router.push('/newsDetail?id='+val.id)" -->

      <!-- @click="$router.push('/newsDetail/'+val.id+'/admin/123456')" -->
      <li
      v-for="val in data"
      :key="val.id"
      @click="$router.push({name:'nDetail', params:{index:val.id,username:'admin',password:456789}})"
      >
        {{ val.title }}
      </li>
    </ul>
  </div>
</template>

<style>
</style>
